import {APIGoodsList} from './fetch.js';

$('#head').load('../../layout/head.html');

layui.use(['laypage'], function () {
  var laypage = layui.laypage;

  var key = '';
  var page = 1;
  var size = 10;
  var sort = 'gname';
  var type = 'asc';

  renderList(true);

  function renderList(tag) {
    APIGoodsList({
      key,
      page,
      size,
      sort,
      type
    }).then(({ data, count }) => {
      var html = '';
      $.each(data, function (index, { gid, img, gname, desc, price }) {
        html += `
        <li>
            <div class="li1"><img src="${img}" alt=""></div>
            <div class="li2">
                <p>${gname}</p>
            </div>
            <div class="li3">
                <p class="p1">型号</p>
                <p class="p2">Sword68</p>
            </div>
            <div class="li4">
                <p class="p1">印字方式</p>
                <p class="p2">热升华正刻</p>
            </div>
            <div class="li5">
                <a href="./detail.html?gid=${gid}">了解|购买</a>
            </div>
        </li>
        `
      })

      $('.list').html(html);

      if (tag) {



        //执行一个laypage实例
        laypage.render({
          elem: 'pagation', //注意，这里的 test1 是 ID，不用加 # 号
          limit: size,
          count //数据总数，从服务端得到
          , jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            //首次不执行
            if (!first) {
              //do something
              page = obj.curr;
              renderList();
            }
          }
        });
      }

    })
  }




})